<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梦幻西游数字资产管理系统 - 角色管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            display: flex;
            min-height: 100vh;
        }
        
        /* 侧边栏样式 - 与之前相同 */
        .sidebar {
            width: 220px;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            padding: 20px 0;
        }
        
        .logo {
            text-align: center;
            padding: 20px;
            font-size: 20px;
            font-weight: bold;
            color: #667eea;
            border-bottom: 2px solid #f0f0f0;
            margin-bottom: 20px;
        }
        
        .nav-menu {
            list-style: none;
        }
        
        .nav-item {
            padding: 15px 30px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            color: #333;
        }
        
        .nav-item:hover {
            background: #f5f5f5;
            border-left: 4px solid #667eea;
            padding-left: 26px;
        }
        
        .nav-item.active {
            background: #667eea;
            color: white;
            border-left: 4px solid #764ba2;
        }
        
        .nav-icon {
            margin-right: 10px;
            font-size: 18px;
        }
        
        /* 主内容区 */
        .main-content {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
        }
        
        .header {
            background: white;
            padding: 20px 30px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header h1 {
            color: #333;
            font-size: 24px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        /* 视图切换 */
        .view-controls {
            background: white;
            padding: 15px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .view-tabs {
            display: flex;
            gap: 10px;
        }
        
        .view-tab {
            padding: 8px 16px;
            border: 2px solid #e8e8e8;
            background: white;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.3s;
        }
        
        .view-tab.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .filter-chips {
            display: flex;
            gap: 10px;
        }
        
        .chip {
            padding: 6px 12px;
            background: #f0f5ff;
            border-radius: 16px;
            font-size: 13px;
            color: #597ef7;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .chip:hover {
            background: #d6e4ff;
        }
        
        .chip.active {
            background: #667eea;
            color: white;
        }
        
        /* 角色卡片网格 */
        .roles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
        }
        
        .role-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .role-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .role-header {
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            position: relative;
        }
        
        .role-header.datiangong { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
        .role-header.putuo { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
        .role-header.longtaizi { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
        .role-header.wuzhuangguan { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
        .role-header.difu { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
        
        .role-name-level {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .role-name {
            font-size: 20px;
            font-weight: bold;
        }
        
        .role-level {
            background: rgba(255,255,255,0.3);
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 14px;
        }
        
        .role-faction {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .role-tag {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255,255,255,0.3);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .role-body {
            padding: 20px;
        }
        
        .role-info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            font-size: 14px;
        }
        
        .info-label {
            color: #999;
        }
        
        .info-value {
            color: #333;
            font-weight: 500;
        }
        
        .role-skills {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #f0f0f0;
        }
        
        .skills-title {
            font-size: 13px;
            color: #999;
            margin-bottom: 10px;
        }
        
        .skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .skill-tag {
            font-size: 12px;
            padding: 4px 10px;
            background: #f0f5ff;
            color: #597ef7;
            border-radius: 4px;
        }
        
        .role-footer {
            padding: 15px 20px;
            background: #fafafa;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .role-account {
            font-size: 13px;
            color: #999;
        }
        
        .role-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-icon {
            cursor: pointer;
            color: #999;
            transition: color 0.3s;
        }
        
        .action-icon:hover {
            color: #667eea;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="logo">⚔️ 梦幻资管系统</div>
            <ul class="nav-menu">
                <li class="nav-item" onclick="location.href='index.html'">
                    <span class="nav-icon">🏠</span>
                    <span>首页仪表盘</span>
                </li>
                <li class="nav-item" onclick="location.href='accounts.html'">
                    <span class="nav-icon">👤</span>
                    <span>账号管理</span>
                </li>
                <li class="nav-item active">
                    <span class="nav-icon">🎮</span>
                    <span>角色管理</span>
                </li>
                <li class="nav-item" onclick="location.href='tasks.html'">
                    <span class="nav-icon">📋</span>
                    <span>任务中心</span>
                </li>
                <li class="nav-item">
                    <span class="nav-icon">💰</span>
                    <span>资产管理</span>
                </li>
                <li class="nav-item" onclick="location.href='statistics.html'">
                    <span class="nav-icon">📊</span>
                    <span>数据统计</span>
                </li>
                <li class="nav-item">
                    <span class="nav-icon">⚙️</span>
                    <span>系统设置</span>
                </li>
            </ul>
        </div>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 头部 -->
            <div class="header">
                <h1>🎮 角色管理</h1>
                <button class="btn btn-primary">
                    <span>➕</span>
                    <span>添加角色</span>
                </button>
            </div>
            
            <!-- 视图控制 -->
            <div class="view-controls">
                <div class="view-tabs">
                    <button class="view-tab active">📱 卡片视图</button>
                    <button class="view-tab">📋 列表视图</button>
                </div>
                <div class="filter-chips">
                    <span class="chip active">全部 (45)</span>
                    <span class="chip">主力角色 (12)</span>
                    <span class="chip">养老角色 (18)</span>
                    <span class="chip">商人角色 (8)</span>
                    <span class="chip">练号中 (7)</span>
                </div>
            </div>
            
            <!-- 角色卡片网格 -->
            <div class="roles-grid">
                <!-- 角色卡片 1 -->
                <div class="role-card">
                    <div class="role-header">
                        <div class="role-tag">⭐ 主力</div>
                        <div class="role-name-level">
                            <div class="role-name">剑侠客</div>
                            <div class="role-level">Lv.175</div>
                        </div>
                        <div class="role-faction">⚔️ 大唐官府</div>
                    </div>
                    <div class="role-body">
                        <div class="role-info-row">
                            <span class="info-label">服务器</span>
                            <span class="info-value">紫禁城</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">所属账号</span>
                            <span class="info-value">zhangsan001</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">房屋等级</span>
                            <span class="info-value">豪宅 / 紫气东来</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">仙灵药铺</span>
                            <span class="info-value">5级</span>
                        </div>
                        <div class="role-skills">
                            <div class="skills-title">生活技能</div>
                            <div class="skill-tags">
                                <span class="skill-tag">烹饪 180</span>
                                <span class="skill-tag">炼药 180</span>
                                <span class="skill-tag">家具 160</span>
                            </div>
                        </div>
                    </div>
                    <div class="role-footer">
                        <span class="role-account">今日任务：8/10</span>
                        <div class="role-actions">
                            <span class="action-icon" title="查看详情">👁️</span>
                            <span class="action-icon" title="编辑">✏️</span>
                            <span class="action-icon" title="删除">🗑️</span>
                        </div>
                    </div>
                </div>
                
                <!-- 角色卡片 2 -->
                <div class="role-card">
                    <div class="role-header longtaizi">
                        <div class="role-tag">💰 商人</div>
                        <div class="role-name-level">
                            <div class="role-name">龙太子</div>
                            <div class="role-level">Lv.155</div>
                        </div>
                        <div class="role-faction">🐉 龙宫</div>
                    </div>
                    <div class="role-body">
                        <div class="role-info-row">
                            <span class="info-label">服务器</span>
                            <span class="info-value">紫禁城</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">所属账号</span>
                            <span class="info-value">zhangsan001</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">房屋等级</span>
                            <span class="info-value">华宅 / 水泽幽光</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">五色旗盒</span>
                            <span class="info-value">已开通</span>
                        </div>
                        <div class="role-skills">
                            <div class="skills-title">生活技能</div>
                            <div class="skill-tags">
                                <span class="skill-tag">烹饪 140</span>
                                <span class="skill-tag">炼药 160</span>
                            </div>
                        </div>
                    </div>
                    <div class="role-footer">
                        <span class="role-account">今日任务：5/8</span>
                        <div class="role-actions">
                            <span class="action-icon" title="查看详情">👁️</span>
                            <span class="action-icon" title="编辑">✏️</span>
                            <span class="action-icon" title="删除">🗑️</span>
                        </div>
                    </div>
                </div>
                
                <!-- 角色卡片 3 -->
                <div class="role-card">
                    <div class="role-header putuo">
                        <div class="role-tag">🏥 辅助</div>
                        <div class="role-name-level">
                            <div class="role-name">观音姐姐</div>
                            <div class="role-level">Lv.169</div>
                        </div>
                        <div class="role-faction">🙏 普陀山</div>
                    </div>
                    <div class="role-body">
                        <div class="role-info-row">
                            <span class="info-label">服务器</span>
                            <span class="info-value">将军阁</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">所属账号</span>
                            <span class="info-value">lisi_game</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">房屋等级</span>
                            <span class="info-value">民宅 / 山林隐逸</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">奇门遁甲</span>
                            <span class="info-value">3级</span>
                        </div>
                        <div class="role-skills">
                            <div class="skills-title">生活技能</div>
                            <div class="skill-tags">
                                <span class="skill-tag">烹饪 120</span>
                                <span class="skill-tag">炼药 180</span>
                                <span class="skill-tag">家具 100</span>
                            </div>
                        </div>
                    </div>
                    <div class="role-footer">
                        <span class="role-account">今日任务：10/10 ✓</span>
                        <div class="role-actions">
                            <span class="action-icon" title="查看详情">👁️</span>
                            <span class="action-icon" title="编辑">✏️</span>
                            <span class="action-icon" title="删除">🗑️</span>
                        </div>
                    </div>
                </div>
                
                <!-- 角色卡片 4 -->
                <div class="role-card">
                    <div class="role-header wuzhuangguan">
                        <div class="role-tag">😴 养老</div>
                        <div class="role-name-level">
                            <div class="role-name">镇元大仙</div>
                            <div class="role-level">Lv.89</div>
                        </div>
                        <div class="role-faction">🌳 五庄观</div>
                    </div>
                    <div class="role-body">
                        <div class="role-info-row">
                            <span class="info-label">服务器</span>
                            <span class="info-value">钓鱼岛</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">所属账号</span>
                            <span class="info-value">zhaoliu_sub</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">房屋等级</span>
                            <span class="info-value">民宅</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">角色作用</span>
                            <span class="info-value">日常挂机</span>
                        </div>
                        <div class="role-skills">
                            <div class="skills-title">生活技能</div>
                            <div class="skill-tags">
                                <span class="skill-tag">烹饪 80</span>
                                <span class="skill-tag">炼药 85</span>
                            </div>
                        </div>
                    </div>
                    <div class="role-footer">
                        <span class="role-account">今日任务：2/5</span>
                        <div class="role-actions">
                            <span class="action-icon" title="查看详情">👁️</span>
                            <span class="action-icon" title="编辑">✏️</span>
                            <span class="action-icon" title="删除">🗑️</span>
                        </div>
                    </div>
                </div>
                
                <!-- 角色卡片 5 -->
                <div class="role-card">
                    <div class="role-header difu">
                        <div class="role-tag">⚔️ 主力</div>
                        <div class="role-name-level">
                            <div class="role-name">阎罗王</div>
                            <div class="role-level">Lv.175</div>
                        </div>
                        <div class="role-faction">👻 地府</div>
                    </div>
                    <div class="role-body">
                        <div class="role-info-row">
                            <span class="info-label">服务器</span>
                            <span class="info-value">将军阁</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">所属账号</span>
                            <span class="info-value">wangwu_merchant</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">房屋等级</span>
                            <span class="info-value">豪宅 / 福地洞天</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">仙灵药铺</span>
                            <span class="info-value">4级</span>
                        </div>
                        <div class="role-skills">
                            <div class="skills-title">生活技能</div>
                            <div class="skill-tags">
                                <span class="skill-tag">烹饪 160</span>
                                <span class="skill-tag">炼药 170</span>
                                <span class="skill-tag">家具 150</span>
                            </div>
                        </div>
                    </div>
                    <div class="role-footer">
                        <span class="role-account">今日任务：7/10</span>
                        <div class="role-actions">
                            <span class="action-icon" title="查看详情">👁️</span>
                            <span class="action-icon" title="编辑">✏️</span>
                            <span class="action-icon" title="删除">🗑️</span>
                        </div>
                    </div>
                </div>
                
                <!-- 角色卡片 6 -->
                <div class="role-card">
                    <div class="role-header datiangong">
                        <div class="role-tag">🆕 练级中</div>
                        <div class="role-name-level">
                            <div class="role-name">李靖</div>
                            <div class="role-level">Lv.69</div>
                        </div>
                        <div class="role-faction">⚡ 天宫</div>
                    </div>
                    <div class="role-body">
                        <div class="role-info-row">
                            <span class="info-label">服务器</span>
                            <span class="info-value">紫禁城</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">所属账号</span>
                            <span class="info-value">zhangsan001</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">房屋等级</span>
                            <span class="info-value">暂无</span>
                        </div>
                        <div class="role-info-row">
                            <span class="info-label">角色作用</span>
                            <span class="info-value">新号培养</span>
                        </div>
                        <div class="role-skills">
                            <div class="skills-title">生活技能</div>
                            <div class="skill-tags">
                                <span class="skill-tag">烹饪 60</span>
                                <span class="skill-tag">炼药 50</span>
                            </div>
                        </div>
                    </div>
                    <div class="role-footer">
                        <span class="role-account">今日任务：0/3</span>
                        <div class="role-actions">
                            <span class="action-icon" title="查看详情">👁️</span>
                            <span class="action-icon" title="编辑">✏️</span>
                            <span class="action-icon" title="删除">🗑️</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
